import React, { useState } from "react";
import { Link, Outlet, useNavigate } from "react-router-dom";

export default function Message() {
  const navigate = useNavigate();
  const [messages] = useState([
    { id: "001", title: "消息1", content: "锄禾日当午" },
    { id: "002", title: "消息2", content: "汗滴禾下土" },
    { id: "003", title: "消息3", content: "谁知盘中餐" },
    { id: "004", title: "消息4", content: "粒粒皆辛苦" },
  ]);

  function showDetail(m) {
    navigate('detail',{
      state:{
        id:m.id,
        title:m.title,
        content:m.content
      }
    })
  }
  return (
    <div>
      <ul>
        {messages.map((m) => {
          return (
            <li key={m.id}>
              {/* params传参 */}
              {/* <Link to={`detail/${m.id}/${m.title}/${m.content}`}>{m.title}</Link> */}
              {/* search传参 */}
              {/* <Link to={`detail?id=${m.id}&title=${m.title}&content=${m.content}`}>{m.title}</Link> */}
              {/* state传参 */}
              <Link 
              to="detail" 
              state={{ 
                id: m.id,
                title: m.title,
                content: m.content
                }}>
                {m.title}
              </Link>&nbsp;&nbsp;
              <button onClick={()=>showDetail(m)}>查看详情</button>
            </li>
          );
        })}
      </ul>
      <hr />
      <Outlet />
    </div>
  );
}
